<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>loading加载</title>
    <style>
        body{
            /* 100%窗口高度 */
            height: 100vh;
            /* 弹性布局水平垂直居中 */
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #000;
            /* 禁止选中 */
            user-select: none;
        }
        .wavy{
            /* 相对定位 */
            position: relative;
            /* 倒影效果 */
            -webkit-box-reflect: below -12px linear-gradient(transparent,rgba(108, 255, 3, 0.2));
        }
        .wavy span{
            position: relative;
            display: inline-block;
            color: #fff;
            font-size: 50px;
            text-transform: uppercase;
            letter-spacing: 8px;
            /* 执行动画：动画名  时长  加速后减速  无限次播放 */
            animation:  wasyAnimate 1s ease-in-out infinite;
            animation-delay: calc(0.1s*var(--i));
        }
        @keyframes wasyAnimate{
            0%{
                transform: translateY(0);
            }
            20%{
                transform: translateY(-20px );
            }
            40%,100%{
                transform: translateY(0);
            }
        
        }
    </style>
</head>

<body>
    <div class="wavy">
        <!-- i为自定义属性，通过var函数调用 -->
        <span style="--i:1">l</span>
        <span style="--i:2">o</span>
        <span style="--i:3">a</span>
        <span style="--i:4">d</span>
        <span style="--i:5">i</span>
        <span style="--i:6">n</span>
        <span style="--i:7">g</span>
        <span style="--i:8">.</span>
        <span style="--i:9">.</span>
        <span style="--i:10">.</span>
    </div>
    <script>

    </script>
</body>


</html>